{* $Id$ *}
{include_core file="admin/lib/header.html" title="角色展示"}
<style>
  .fold{
    width:600px;
    height: auto;
    overflow: hidden;
    border-top:1px solid #DDD;
    border-left:1px solid #DDD;
    border-right:1px solid #DDD;
  }
  .fold-group{
    height: auto;
    overflow: hidden;
    border-bottom: 1px solid #DDD;
  }
  .fold-title{
    padding:10px;
    height: 14px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background: #F5F5F5;
  }
  .fold-content{
    padding-top:10px;
    padding-left:10px;
    font-size: 12px;
    color:#666;
    border-top:1px solid #DDD;
  }
  .hide{
    display: none;
  }
  .slt-input{
    float: left;
    margin-right:20px;
    margin-bottom: 10px; 
  }
</style>
<div class="page-header border-bottom clearfix">
  <h2 class="left">角色管理<span>{if $info}编辑{else}添加{/if}角色</span></h2>
  <a href="{AnUrl('role/admin')}" class="btn btn-default btn-sm right">&lt;&nbsp;返回角色列表</a>
</div>
<!--start:角色新增-->
<div class="add-form">
  <form class="js_creatForm" action="{AnUrl('role/admin/save')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{$role_info.id}">
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label for="" class="add-f-label">角色组名称：</label></th>
        <td>
          <input name="info[title]" style="width:490px;" value="{$role_info.title}" type="text" class="add-f-ipt1 js_title">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请输入角色组名称</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">父级角色：</label></th>
        <td>
          <select class="search-f-slt1" name="info[parent_id]">
            <option>请选择父级</option>
            {foreach $role_list as $k=>$v}
            {if $v.id != $role_info.id && !$v.parent_id}
            <option value="{$v.id}" {if $role_info.parent_id == $v.id}selected{/if}>{$v.title}</option>
            {/if}
            {/foreach}
          </select>
          <div class="tips">可设置角色父级</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">角色类型：</label></th>
        <td>
          <select class="search-f-slt1 js_type" name="info[type]">
            <option>请选择</option>
            {$type_list = role_config::$role_type}
            {foreach $type_list as $k=>$v}
            <option value="{$k}" {if $role_info.type == $k}selected{/if}>{$v}</option>
            {/foreach}
          </select>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>请选择角色类型</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">配置角色权限：</label></th>
        <td>
          <div class="fold">
            {foreach $admin_menu_list as $key=>$value}
            <div class="fold-group js_foldGroup">
              <div class="fold-title js_foldTitle">
                {$value.title}：<input type="checkbox" class="js_sltAll"><span class="js_sltAllText">全选</span>
              </div>
              <div class="fold-content js_foldContent hide" i-data="{$value.id}">
                {foreach $value.children as $k=>$v}
                <div class="slt-input">
                  <input type="checkbox" class="js_sltPrivilege" name="info[privilege][]" value="{$v.id}">
                  <span class="js_sltPrivilegeText">{$v.title}</span>
                </div>
                {/foreach}
              </div>
            </div>
            {/foreach}
          </div>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>配置角色权限</div>
        </td>
      </tr>
      
      <tr><th>&nbsp;</th><td class="noborder"><button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button></td></tr>
    </table>
  </form>
</div>
<!--end:角色新增-->
{load_js file='zclip/jquery.zclip.min.js'}
{load_js file='zclip/ZeroClipboard.js'}
<script>
var resName = 'role';
function setNum(thisClass, maxNum) {
  var presentNum = getFontNum($('.'+thisClass).val());
  var remainNum  = maxNum - presentNum;
  $('.'+thisClass+'Num').text(remainNum);
}
var oldObj = false;
$(function(){ 
  // 初始化选中的权限
  var sltInputKey = "{$role_info.privilege}";
  if (sltInputKey) {
    var sltArr   = sltInputKey.split(',');
    var sltCount = sltArr.length;
    for (var i = 0; i < sltCount; i++) {
      $('[value="'+sltArr[i]+'"]input:').attr('checked', 'checked');
    };

    // 是否全选
    $('.js_sltAll').each(function(){
      var parentObj = $(this).closest('.js_foldGroup');
      var checkBox  = true;
      parentObj.find('.js_sltPrivilege').each(function(){
        if ($(this).attr('checked') != 'checked') {
          checkBox  = false;
        };
      });
      $(this).attr('checked', checkBox);
    });
  };

  // 初始化选择框  
  $('.js_foldContent').each(function(){
    $(this).removeClass('hide');
    $(this).slideUp(0);
  });
  showDiv($('.js_foldContent').eq(0), 300);

  $('.js_foldTitle').click(function(e){
    e.cancelBubble = true;
    showDiv($(this).next(), 300);
  });

  $('.js_sltAll, .js_sltAll+span').click(function(e){
    var parentObj = $(this).closest('.js_foldGroup');
    var checkBox  = false;
    if ($(this).attr('class') == 'js_sltAllText') {
      if ($(this).prev().attr('checked') == 'checked') {
        $(this).prev().attr('checked', false);
      } else {
        $(this).prev().attr('checked', true);
        checkBox  = true;
      }
    }
    if ($(this).attr('checked') == 'checked') {
      checkBox  = true;
    }
    parentObj.find('.js_sltPrivilege').attr('checked', checkBox);
  });
  $('.js_sltPrivilege, .js_sltPrivilege+span').click(function(){
    var parentObj = $(this).closest('.js_foldGroup');
    var checkBox  = true;
    if ($(this).attr('class') == 'js_sltPrivilegeText') {
      if ($(this).prev().attr('checked') == 'checked') {
        $(this).prev().attr('checked', false);
        checkBox  = false;
      } else {
        $(this).prev().attr('checked', true);
      }
    }
    parentObj.find('.js_sltPrivilege').each(function(){
      if ($(this).attr('checked') != 'checked') {
        checkBox  = false;
      };
    });
    parentObj.find('.js_sltAll').attr('checked', checkBox);
  });

  // 初始化剩余字数
  setNum('js_title', 10);
  $('.js_title').keyup(function(){
    setNum('js_title', 10);
  });

  // 输入数字
  $('.js_number').keyup(function(){
    autoNum($(this));
  });

  // 选择时间
  $('#startTime, #stopTime').datepicker({
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true,
    changeYear:true,
    changeMonth:true,
    minDate: '-10y',
    maxDate: '+5y',
    yearSuffix: ''
  });
  
  // 提交验证
  $('.js_submit').click(function(e){
    e.preventDefault();
    var title      = $.trim($('.js_title').val());
    var type      = $.trim($('.js_type').val());

    if (!title) {
      showMsg('标题不能为空');
      return;
    }

    if (!type) {
      showMsg('角色类型不能为空');
      return;
    }

    $('.js_creatForm').submit();
  });
});

// 自动转为数字
function autoNum(obj) {
  var currNum = obj.val();
  currNum = parseInt(currNum);
  if (isNaN(currNum)) {
    currNum = '';
  };
  obj.val(currNum);
}

// 显示选择框
function showDiv(obj, fast){
  if (oldObj) {
    if (oldObj.attr('i-data') == obj.attr('i-data')){
      return false;
    }
    oldObj.slideUp(fast);
  }
  obj.slideDown(fast);

  oldObj = obj;
}
</script>
{include_core file="admin/lib/footer.html"}